<script src="http://cdn.bootcss.com/vue/2.1.8/vue.js"></script>
<style>
    .div{ opacity:0.5; -moz-opacity:0.5; align-items: center; border:3px solid fuchsia}
    .jc{ font-weight:800}
    .log_window {
        width:200px;
        height:200px;
        background-color:#000;
        margin: auto;
        position: absolute;
        z-index:3;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display:none;
    }
 </style>
<div id="app">
    <!--<div id="maskLayer">遮罩层</div>-->
    <div >
        <datagrid :myname="name" :mycols="cols" :mylist="list" :mysearch="search" v-bind:myclass="classstr"
                  @delrecord="delrecord" @open="open" @editdata="editdata" @updatestyle="updateStyle" ></datagrid>
    </div>
    <br/>
    <div>
        <create @savedata="savedata" @close="close" @update="update" :show="show"></create>
    </div>
</div>

<template id="create">
    <div >
    <table border="1" align="center" width="50%" v-show="show">

        <tr>
            <th colspan="2">添加</th>
        </tr>
        <tr align="center">
            <td>名字:</td>
            <td><input v-model="divmap.name" /></td>
        </tr>
        <tr align="center">
            <td>年龄:</td>
            <td><input v-model="divmap.age" /></td>
        </tr>
        <tr align="center">
            <td>性别:</td>
            <td><input v-model="divmap.sex" /></td>
        </tr>
        <tr align="center">
            <td colspan="2" v-if="status==='update'"><button @click="update">更新</button></td>
            <td colspan="2" v-else > <button @click="save">保存</button></td>
        </tr>
        <tr align="center">
            <td colspan="2"><button @click="close">关闭</button></td>
        </tr>
    </table>
    </div>
</template>

<template id="datagrid">
    <table border="1" align="center" width="50%">
        <tr>
            <td>查询</td>
            <th colspan="5"><input size="100" v-model="searchvalue" /></th>
        </tr>
        <tr align="center">
            <td v-for="col in mycols" :class="myclass[col+'class']"><a href="javascript:void(0)" @click="sortEvent(col+'class')">{{col | filterCols}}</a></td>
            <td>delete</td>
        </tr>
        <tr  v-for="map in filterList" >
            <td v-for="(col,index) in mycols">
                <a href="javascript:void(0)" @click="edit(map)" v-if="col==='name'">{{map[col]}}</a>
                <template v-else>
                    {{map[col]}}
                </template>
            </td>
            <td><button  @click="delrecord(map)">删除</button></td>
        </tr>
        <tr align="left">
            <td colspan="2"><button @click="open">新增</button></td>
        </tr>
    </table>
</template>

<script>
    var Bus = new Vue()
    var datagrid = {
        template: '#datagrid',
            props: {
            myname:String,
            mycols:Array,
            mylist:Array,
            mysearch:String,
            myclass:Object
        },
        data:function(){
            return{
                searchvalue :'' ,
                classstr:'',
                ageclassstr:'jc'
            }
        },
        methods:{
            delrecord : function(value){
                this.$emit('delrecord',value);
            },
            showWindow : function(){
                Bus.$emit('showWindow');
            },
            open : function(){
                this.$emit('open');
                Bus.$emit('updateStatus','create')
            },
            edit : function(map){
                this.$emit('editdata',map);
                Bus.$emit('updateStatus','update')
                this.map = {};
            },
            sortEvent : function(col){
                this.$emit('updatestyle',col);
            }
        },
        computed: {
            initsearch: function () {
                this.searchvalue=this.mysearch
                return this.searchvalue;
            },
            filterList : function(){
                var self = this;
                return self.mylist.filter(function(mapaa){
                    for(key in mapaa){
                        if(mapaa[key].indexOf(self.searchvalue)!==-1){
                            return true;
                        }
                    }
                })
            }
        },
        filters : {
            filterCols : function(value){
                return value.toUpperCase();
            }
        }
    }

    var create = {
        template: '#create',
        props: {
            show:true
        },
        data:function(){
            return{
                divmap:{name:'姓名',age:'99',sex:'bunanbunv'},
                oldmap:{name:'姓名',age:'99',sex:'bunanbunv'},
                status:'123'
            }
        },
        methods:{
            save : function(){
                this.$emit('savedata',this.divmap);
                this.divmap = {};
            },
            close : function(){
                this.$emit("close");
            },
            update : function(){
                this.$emit('update',this.divmap,this.oldmap);
            }
        },
        computed: {
        },
        filters : {

        },
        created : function(){
            var self = this;
            Bus.$on('showWindow',function(){
                self.show=true;
            });
            Bus.$on('updateStatus',function(status){
                self.status=status;
            });
        }
    }

    var vm = new Vue({
        el: '#app',
        data: {
            name: 'keepfool',
            search : 'z',
            cols : ['name','age','sex'],
            list : [
                {name:"zhangsan1",age:"21",sex:"nan"},
                {name:"zhangsan2",age:"22",sex:"nv"},
                {name:"zhangsan3",age:"23",sex:"nan"},
                {name:"zhangsan4",age:"24",sex:"nv"}
                ],
            classstr : {nameclass:"",ageclass:"",sexclass:""},
            show : false
        },
        methods:{
            delrecord : function(value){
                var d = this.list;
                this.list.forEach(function (iteam,i){
                    if(iteam === value){
                        d.splice(i,1);
                        return;
                    }
                })
            },
            savedata : function(value){
                this.list.push(value);
                this.show=false;
            },
            editdata : function(map){
            //    this.list.push(value);
                this.$children[1].divmap=this.initItemForUpdate(map);
                this.$children[1].oldmap=map;
                this.show=true;
            },
            update : function(newmap,oldmap){
                var data = this.list;

                data.forEach(function(iteam,i){
                    if(oldmap===iteam){
                        data.splice(i,1);
                    }
                })
                data.push(newmap);
                this.show=false;
            },
            close : function(){
                this.show=false;
            },
            open : function(){
                this.$children[1].divmap={};
                this.show=true;
            },
            updateStyle : function(col){
                var data = this.classstr;
                for(key in data){
                    if(key === col){
                        data[key]="jc";
                    }else{
                        data[key]="";
                    }
                }
            //    this.$set(this.classstr,data);
            },
            initItemForUpdate: function(p) {
                var c = c || {};
                for(var i in p) {
                    // 属性i是否为p对象的自有属性
                    if(p.hasOwnProperty(i)) {
                        if(typeof p[i] === 'object') {
                            c[i] = Array.isArray(p[i]) ? [] : {}
                            deepCopy(p[i], c[i])
                        } else {
                            // 属性是基础类型时，直接拷贝
                            c[i] = p[i]
                        }
                    }
                }
                return c;
            }
        },
        components: {
            'datagrid' : datagrid,
            'create': create

        }
    })



</script>